<template>
  <div class="mate-form-2-outer">
    <div style="display: flex">
      <Button @click="handleImport">导入</Button>
      <db-info-bar ref="dbInfoRef"></db-info-bar>
    </div>
    <table-pager class="bottom-table" :dataFull="contentData" v-on:change-data="changeEventGroupList">
      <Table border :columns="contentColumn" :data="pagerData" :height="500" :width="1200"></Table>
    </table-pager>
  </div>
</template>

<script>
import voca from 'voca';
import TablePager from '../components/TablePager.vue';
import DbInfoBar from './DbInfoBar.vue';

export default {
  name: 'MateForm2',
  components: {
    TablePager,
    DbInfoBar,
  },
  data() {
    return {
      // csv内容数据
      contentColumn: [],
      contentData: [],
      pagerData: [],
    };
  },
  computed: {
    curFile: function () {
      return this.$store.state.curFile;
    },
    curFileText: function () {
      return this.$store.state.curFileText;
    },
  },
  watch: {
    curFileText: function () {
      this.descFile();
    },
  },
  methods: {
    handleImport() {
      this.$refs.dbInfoRef.importData(this.curFile.name, this.contentData);
    },
    changeEventGroupList(param) {
      this.pagerData = param;
    },
    descFile() {
      if (this.curFile.type === 'text/csv') {
        // const bbb = this.curFileText.split('\r\n');
        const bbb = voca.split(this.curFileText, '\n');
        const colArray = bbb[0].split(',');
        this.contentColumn = colArray.map(item => {
          return {
            key: item,
            title: item,
            width: 120,
          };
        });
        const dataList = [];
        for (let i = 1; i < bbb.length; i++) {
          const rowArray = bbb[i].split(',');
          const rowObj = {};
          for (let j = 0; j < rowArray.length; j++) {
            rowObj[colArray[j]] = rowArray[j];
          }
          dataList.push(rowObj);
        }
        this.contentData = dataList;
      }
    },
  },
  mounted() {
    this.descFile();
  },
};
</script>

<style scoped>
</style>
